<template>
    <div class="pt44">
        <div class="page_top tc">
            <p class="isOpenAccount_box open" @click="showOpenAccount"><span class="isOpenAccount_icon"></span><span id="isOpenAccount">已绑定</span></p>
            <p class="balance_title">账户余额(元)</p>
            <p class="balance">{{ balance }}</p>
            <p class="balance_bottom">请关注微信公众号[小通金服],进行账户操作</p>
        </div>
        <div v-show="!sign" class="page__bd page__bd_spacing">
            <a @click="signfunc" href="javascript:;" class="weui-btn weui-btn_primary">签到</a>
        </div>
        <div v-show="sign" class="weui-flex tc staff_func">
            <router-link to="/scanCode" class="weui-flex__item right_onePx">
                <div class="placeholder"><i class="sc-icon c_icon"></i></div>
                <div>交易扫码</div>
            </router-link>
            <div id="settingBtn" @click="getMerQrCodeList" class="weui-flex__item right_onePx">
                <div class="placeholder"><i class="ewm-icon c_icon"></i></div>
                <div>商户二维码</div>
            </div>
            <router-link to="/staffRecord" class="weui-flex__item right_onePx">
                <div class="placeholder"><i class="cx-icon c_icon"></i></div>
                <div>交易查询</div>
            </router-link>
        </div>
        <div class="js_dialog" id="iosDialog2" v-if="this.$store.state.fillInfo">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                <div class="weui-dialog__hd"><strong class="weui-dialog__title">个人信息</strong><i id="info-code" style="position: absolute;right: 10px;top: 5px;" @click="closeInfo" class="fa fa-times"  aria-hidden="true"></i></div>
                <div class="weui-dialog__bd">
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell">
                            <div id="user_name_panel" class="title_panel" style="display: block; opacity: 0.8; top: 8px;">
                                <div class="weui-cell_hd">
                                    <label class="weui-label">姓名</label>
                                </div>
                            </div>
                            <div class="weui-cell__bd weui-cell_primary">
                                <input v-model="staffName" readonly="readonly" class="weui-input" type="text" placeholder="姓名">
                            </div>
                        </div>
                        <div class="weui-cell">
                            <div id="user_id_panel" class="title_panel">
                                <div class="weui-cell_hd">
                                    <label class="weui-label">身份证号码</label>
                                </div>
                            </div>
                            <div class="weui-cell__bd weui-cell_primary">
                                <input id="user_id" @input="userIdInput" v-model="userId" class="weui-input" type="tel" placeholder="身份证号码,末位X以*代替">
                            </div>
                        </div>
                        <div class="weui-cell">
                            <div id="user_card_panel" class="title_panel">
                                <div class="weui-cell_hd">
                                    <label class="weui-label">银行卡号</label>
                                </div>
                            </div>
                            <div class="weui-cell__bd weui-cell_primary">
                                <input id="user_card" @input="checkInfoInput"  v-model="userCard" class="weui-input" type="tel" placeholder="银行卡号">
                            </div>
                        </div>
                    </div>
                    <div class="dialog_bottom">
                        <a @click="infoSubmit" href="javascript:;" v-bind:class="{'weui-btn_disabled':noInfoSubmit}" class="weui-btn weui-btn_primary">提交</a>
                        <p>提示:请<span style="color:red;">谨慎填写</span>以上信息,活动奖励将发到对应的账户</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="js_dialog" id="listDialog" v-show="showSignMer">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                <div class="weui-dialog__hd"><strong class="weui-dialog__title">签到商户</strong></div>
                <div class="weui-dialog__bd">
                    <div id="merchanList" class="weui-cells">
                        <div v-for="item in merList"  @click="getMerQrCode(item)" class="weui-cell">
                            <div class="weui-cell__bd tl">
                                <p>{{item.merName}}</p>
                            </div>
                            <div class="weui-cell__ft"><img src="../assets/images/erweima_icon.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="js_dialog" v-show="showMerQrCode" id="merQrCodeDialog">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                <div class="weui-dialog__hd"><strong class="weui-dialog__title">{{ merchantName }}</strong><i @click="closeMerQrcode"  class="fa fa-times"  aria-hidden="true"></i></div>
                <img class="merQrCodeImg" src="" />
            </div>
        </div>
    </div>
</template>

<script>
var tic = require("../components/titleInput.js");
var cm = require("../components/common.js");
export default  {
    name: 'StaffHome',  // 组件名称
    data () {  // 数据
        return {
            msg: 'StaffHome',
            staffName:"",                 // 营业员名字
            balance:"0.00",
            merchantName:"",
            sign:false,
            userId:"",
            userCard:"",
            merList:[],
            noInfoSubmit:false,
            fillInfo:false,
            showMerQrCode:false,
            showSignMer:false,   // 签到商户
            IsOpen_resp_code: '1200'
        }
    },
    methods:{ // 自定义方法，可对data进行处理
        checkInfoInput(){
            // 身份证正则表达式
            var idRegExp = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;
            var isUserId = idRegExp.test(this.userId);
            if(isUserId && this.userCard.length > 12 && this.userCard.length < 20){
                this.noInfoSubmit = false;
            }else{
                this.noInfoSubmit = true;
            }
        },
        userIdInput(){
            this.userId = this.userId.replace(/\D/,"X");
            this.checkInfoInput();
        },
        infoSubmit(){ // 提交用户信息
            var _this = this;
            $.post(InfoServletUrl, {
                loginName: this.$store.state.loginName,
                token: this.$store.state.token,
                openid: this.$store.state.openid,
                latitude:"31.230416",
                longitude:"121.473701",
                loginType: this.$store.state.loginType,
                cust_name:this.staffName,
                idNo:this.userId,
                cardNo:this.userCard,
                id_no_type:1
            }, function infoSubmitCallBack(data) {
                console.log("infoSubmitCallBack");

                _this.$store.state.fillInfo = false;   // 点击过了请求结果回来了,允许点击
                if (data.login_response) {
                    cm.haslogin(data);
                    return;
                }

                if (data.recharge_response && data.recharge_response.resp_code == "0000") {
                    this.IsOpen_resp_code = '1200';
                    _this.$store.state.errorMsg = data.recharge_response.resp_msg;
                    $(".isOpenAccount_box").removeClass("noOpen").addClass("open");
                    $("#isOpenAccount").text("已绑定")
                    _this.acctQueryMyMoney();
                } else if (data.recharge_response && data.recharge_response.resp_code == "3020") {
                    var rmsg = data.recharge_response.resp_msg ? data.recharge_response.resp_msg : "账户绑定成功";
                    _this.$store.state.errorMsg = rmsg;
                } else if (data.recharge_response && data.recharge_response.resp_msg) {
                    _this.$store.state.errorMsg = data.recharge_response.resp_msg;
                    _this.$store.state.setFillInfo = true;
                } else if (data.error_response && data.error_response.sub_msg) {
                    _this.$store.state.errorMsg = data.error_response.msg;
                    _this.$store.state.setFillInfo = true;
                } else {
                    _this.$store.state.errorMsg = "开户失败,下次登入开通";
                }



            });
        },
        signfunc(){ // 调签到接口
            var _this = this
            _this.$store.state.showLoading = true;
            var nowTime = (new Date()).getTime();
            $.post(
                SignServletUrl, {
                    loginName: this.$store.state.loginName,
                    token: this.$store.state.token,
                    openid: this.$store.state.openid,
                    latitude:"31.230416",
                    longitude:"121.473701",
                    loginType: this.$store.state.loginType,
                    nowTime: nowTime
                },
                function  (msg) {
                    _this.$store.state.showLoading = false;
                    if (msg.login_response) {
                        cm.haslogin(msg);
                        return;
                    }else{
                        _this.sign = true;
                        if(msg.sign_response && msg.sign_response.resp_code == "0001"){
                            if(msg.sign_response.resp_msg){
                                _this.$store.state.errorMsg = msg.sign_response.resp_msg
                            }else{
                                _this.$store.state.errorMsg = "8小时内已签到，无需再次签到"
                            }

                        }
                    }
                }
            );
        },
        getMerQrCodeList() {  // 取商户二维码列表
            console.log("merclick");
            //    var MerQrListUrl = window.location.protocol + baseurl + "MerQrCodeServlet";
            var _this = this;
            $.post(
                MerQrListUrl, {
                    loginName: this.$store.state.loginName,
                    token: this.$store.state.token,
                    loginType: this.$store.state.loginType,
                    openid: this.$store.state.openid
                },
                function(qrcodeList) {
                    console.dir(qrcodeList);
                    if (qrcodeList.login_response) {
                        cm.haslogin(qrcodeList);
                        return;
                    } else if (qrcodeList.merchant_Qw_response && qrcodeList.merchant_Qw_response.resp_code == "0002") {
                        _this.$store.state.errorMsg = "当前无可交易的商户";
                    } else {
                        if(qrcodeList.merchant_Qw_response && qrcodeList.merchant_Qw_response.mer_result_arrays && qrcodeList.merchant_Qw_response.mer_result_arrays.mer_result){
                            _this.merList = qrcodeList.merchant_Qw_response.mer_result_arrays.mer_result;
                            _this.showSignMer = true;
                        }else{
                             _this.$store.state.errorMsg = "当前无可交易的商户";
                        }


//                        $.publish("showListDialog", [qrcodeList]);
                    }
                }

            );
        },
        getMerQrCode(item){  // 取商户二维码
            this.merchantName = item.merName;
            this.showSignMer = false;
            var qrParameters = {
                "tl_mer_no": item.merNo
            }
            $.post(servletUrl, qrParameters, function merQrCodeCallBack(msg) {

                console.dir(msg);
                this.showMerQrCode = true;
                if (msg.login_response) {
                    cm.haslogin(msg);
                    return;
                }
                var tiket = msg.lfq_merinfo_response.mer_ticket;
                if (tiket) {
                    $("#merQrCodeDialog img").attr("src", "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=" + tiket);
//                    $("#qrcode-name").text(corpAbbr);
//                    showMerQrCode();
                } else {
//                    errorObject.showErroDialog("该商户未设置二维码");
                }

            }.bind(this))
        },
        closeMerQrcode(){
            this.showMerQrCode = false;
        },
        acctQueryMyMoney(){  // 营业员余额查询
            var parameters = {
                loginName: this.$store.state.loginName,
                token: this.$store.state.token,
                loginType: this.$store.state.loginType,
                openid: this.$store.state.openid
            };
            var _this = this;
            $.post(TLTD_ACCTQ_URL, parameters, function myMoneyBack(mdata) {
                console.dir(mdata);

                if (mdata.login_response) {
                    cm.haslogin(mdata);
                    return;
                }

                if (mdata.acct_response && mdata.acct_response.acct_info_arrays && mdata.acct_response.acct_info_arrays.acct_info[0] && mdata.acct_response.acct_info_arrays && mdata.acct_response.acct_info_arrays.acct_info[0].acct_balance) {
                    var infons = mdata.acct_response.acct_info_arrays.acct_info;
                    for (var i = 0, l = infons.length; i < l; i++) {
                        if (infons[i].acct_type == "3") {
                            _this.balance = mdata.acct_response.acct_info_arrays.acct_info[i].acct_balance;
                            
                        }
                    }

                } else {
                    // 没查到余额
                    _this.$store.state.errorMsg = "暂时查不到余额";
                }
            });
        },
        hasRegister() {  // 是否注册
            //    var zcsever = wlprotocol + baseurl + "IsSignServlet";
            var parameters = {
                token:this.$store.state.token,
                loginName:this.$store.state.loginName,
                openid:this.$store.state.openid,
                loginType:this.$store.state.loginType
            };
            var _this = this;
            $.post(zcsever, parameters, function registerBack(rdata) {
                console.dir(rdata);
                _this.$store.state.showLoading = false;
                if (rdata.login_response) {
                    cm.haslogin(rdata);
                    return;
                }
                if(rdata.sign_response && rdata.sign_response.resp_code){
                    _this.staffName = rdata.sign_response.cust_name;
                    setTimeout(function  () {
                       tic.titileInputInit();
                    },300);
                }
                if (rdata.sign_response && rdata.sign_response.resp_code == "01") { // 已开户 未签到
                    _this.sign = false;
//                    _this.acctQueryMyMoney();
                    //        location.href = "./lodin.html" + location.search;
                } else if (rdata.sign_response && rdata.sign_response.resp_code == "02") { // 已开户 已签到

                    _this.sign = true;
//                    _this.acctQueryMyMoney();

                } else if (rdata.sign_response && rdata.sign_response.resp_code == "03") { // 未开户未签到
                    _this.staffName = rdata.sign_response.cust_name;
                    _this.$store.state.fillInfo = true;
                    setTimeout(function  () {
                       tic.titileInputInit();
                    },300);

                } else if (rdata.sign_response && rdata.sign_response.resp_code == "04") { //未开户 已签到
                    _this.staffName = rdata.sign_response.cust_name;
                    _this.$store.state.fillInfo = true;
                    _this.sign = true;
                    setTimeout(function  () {
                       tic.titileInputInit();
                    },300);
                    //        acctQueryMyMoney();
                }
            });

        },
        closeInfo(){
            this.$store.state.fillInfo = false;
        },
        showOpenAccount(){
            if(this.IsOpen_resp_code != '1200'){
                this.$store.state.fillInfo = true;
            }
        },
        // 是否弹开户框
        isOpenAccount(argument) {
            var parameters = {
                token:this.$store.state.token,
                loginName:this.$store.state.loginName,
                openid:this.$store.state.openid,
                loginType:this.$store.state.loginType
            };
            var _this = this;
            $.post(window.CashierIsOpenAccountServlet, parameters, function (cdata) {
                
                if(cdata.login_response && cdata.login_response.resp_code){
                    if(cdata.login_response.resp_code == "1200"){
                        _this.acctQueryMyMoney();
                    }else if(cdata.login_response.resp_code == "1201"){
                        $(".isOpenAccount_box").removeClass("open").addClass("noOpen");
                        _this.IsOpen_resp_code = '1201'
                        $("#isOpenAccount").text("未绑定")
                        _this.$store.state.fillInfo = true;
                    } else if(cdata.login_response.resp_code == "1202"){
                        _this.IsOpen_resp_code = '1202'
                        $("#isOpenAccount").text("未绑定")
                        $(".isOpenAccount_box").removeClass("open").addClass("noOpen");
                        $(".page_top").hide()
                    }
                    
                }
            });
        }
    },
    beforeMount:function  () {
        this.$store.state.showLoading = true;
        this.$store.state.fillInfo = false;
        this.$store.state.loginType = "2";
        this.$store.commit("getSelectionInfo");
    },
    mounted:function  () {
        this.hasRegister();
        this.$store.state.headerTitle = "营业员首页";
        this.isOpenAccount()
    },
    beforeRouteLeave (to, from, next) {
        if(to.name == "ScanCode"){
            this.$store.state.headerTitle = "扫码消费";
        }
        next();
    }
}
</script>

<style lang='scss' scoped>
.page_top{
    background: #fff;
    padding: 30px 0;
    margin-bottom: 10px;
    position: relative;
    .isOpenAccount_box{
        position: absolute;
        right: 20px;
        top: 90px;
        &.open{
            color: #666;
            .isOpenAccount_icon{
                background-image: url(../assets/images/yibangding_icon.png);
            }
        }
        &.noOpen{
            color: #1c51ef;
            .isOpenAccount_icon{
                background-image: url(../assets/images/weibangding_icon.png);
            }
        }
    }
    .isOpenAccount_icon{
        height: 16px;
        margin-right: 2px;
        background-repeat: no-repeat;
        background-size: 100%;
        width: 22px;
        display: inline-block;
        vertical-align: middle;
    }
}
.balance{
    font-size: 40px;
    color: #000;
}
.balance_title{
    font-size: 20px;
    color: #666;
}
.balance_bottom{
    font-size: 14px;
    color: #999;
}
.cx-icon{
    background-image: url(../assets/images/jiaoyichaxun_icon.png);
}
.staff_func{
    background: #fff;
    padding: 23px 0;
}
.page__bd_spacing {
    padding: 15px;
    background-color: #fff;
}
.weui-cell {
    padding-top: 32px;
}
.title_panel {
    font-size: 12px;
    opacity: 0.2;
    top: 32px;
    padding-bottom: 0px;
    position: absolute;
    display: none;
    text-align: left;
}
#merQrCodeDialog{
   .weui-dialog {
        max-width: 250px;
        width: 240px;
        height: 270px;
    }
    i {
        position: absolute;
        width: 30px;
        display: inline-block;
        height: 21px;
        padding-right: 5px;
        padding-top: 5px;
        top: 0px;
        right: 0px;
    }
}
.fa-times {
    font-size: 16px;
    padding: 3px 5px 0 0;
    &:before {
        content: "X";
    }
}
.merQrCodeImg{
    width: 450px;
    height: 430px;
    transform: scale(0.5);
    margin-top: -115px;
    margin-left: -103px;
    border-width: 0px;
}
</style>
